<template>
  <div class="town">
    <!-- 表头 -->
    <div class="header">
      <el-button
        type="primary"
        icon="el-icon-circle-plus-outline"
        round
        @click="addTownDialog = true"
        >新增区域</el-button
      >
    </div>
    <!-- 页面数据 -->
    <div class="table">
      <el-table :data="tableData" height="550" border style="width: 100%">
        <el-table-column prop="id" label="id" width="40"> </el-table-column>
        <el-table-column prop="town_name" label="区域名称"></el-table-column>
        <el-table-column prop="town_address" label="区域地址"></el-table-column>
        <el-table-column
          prop="town_range"
          label="区域打卡范围"
        ></el-table-column>
        <el-table-column
          prop="createDate"
          label="区域创建时间"
        ></el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="updateTown(scope.row)"
              >编辑</el-button
            >
            <el-button type="text" size="small" @click="delTown(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 新增区域dialog -->
    <el-dialog title="新增区域" :visible.sync="addTownDialog">
      <el-form :model="addTownForm">
        <el-form-item label="区域名称" label-width="80">
          <el-input
            v-model="addTownForm.town_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="区域地址" label-width="80">
          <el-input
            v-model="addTownForm.town_address"
            autocomplete="off"
            @focus="mapDialog = true"
          ></el-input>
        </el-form-item>
        <el-form-item label="区域地址(经度)" label-width="80">
          <el-input
            v-model="addTownForm.longitude"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="区域地址(纬度)" label-width="80">
          <el-input
            v-model="addTownForm.latitude"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="可以打卡范围" label-width="80">
          <el-input
            v-model="addTownForm.town_range"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-dialog
          width="30%"
          title="内层 Dialog"
          :visible.sync="mapDialog"
          append-to-body
        >
          <map-vue
            :town-address="addTownForm.town_address"
            @change="change"
            @townAddressChange="townAddressChange"
          ></map-vue>
        </el-dialog>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset('add')">取 消</el-button>
        <el-button type="primary" @click="addTown">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改区域dialog -->
    <el-dialog title="修改区域" :visible.sync="updateTownDialog">
      <el-form :model="updateTownForm">
        <el-form-item label="区域名称" label-width="80">
          <el-input
            v-model="updateTownForm.town_name"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="区域地址" label-width="80">
          <el-input
            v-model="updateTownForm.town_address"
            autocomplete="off"
            @focus="mapDialog = true"
          ></el-input>
        </el-form-item>
        <el-form-item label="区域地址(经度)" label-width="80">
          <el-input
            v-model="updateTownForm.longitude"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="区域地址(纬度)" label-width="80">
          <el-input
            v-model="updateTownForm.latitude"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="可以打卡范围" label-width="80">
          <el-input
            v-model="updateTownForm.town_range"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属乡镇">
          <el-select
            v-model="updateTownForm.parentId"
            placeholder="请选择区域所属乡镇"
          >
            <el-option
              v-for="item in RegionData"
              :key="item.id"
              :label="item.region_name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-dialog
          width="30%"
          title="内层 Dialog"
          :visible.sync="mapDialog"
          append-to-body
        >
          <map-vue
            :town-address="updateTownForm.town_address"
            @change="change"
            @townAddressChange="townAddressChange"
          ></map-vue>
        </el-dialog>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reset('update')">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { idToTown, addTown, getRegion,updateTown,delTown } from "@/api/town/index";
import mapVue from "@/components/map.vue";
import { dateFormat } from '@/utils/utils';
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "town",
  data() {
    return {
      tableData: [],
      addTownDialog: false,
      mapDialog: false,
      addTownForm: {
        parentId: parseInt(this.$route.params.id),
        town_name: "",
        town_address: "",
        town_range: "",
        attendance_id: "",
        longitude: "",
        latitude: "",
      },
      updateTownDialog: false,
      updateTownForm: {
        id: "",
        parentId: "",
        town_name: "",
        town_address: "",
        town_range: "",
        attendance_id: "",
        longitude: "",
        latitude: "",
      },
      attendanceData: [],
      RegionData: [],
      mountedFlag: false,
    };
  },
  components: {
    mapVue,
  },
  props: {},
  computed: {},
  watch: {},
  created() {
    this.init();
    this.getRegion();
  },
  methods: {
    init() {
      idToTown(this.$route.params.id).then((res) => {
        if (res.status === 0) {
          this.tableData = res.data;
          this.tableData.forEach(item=>{
            item.createDate = dateFormat(item.createTime)
          })
        }
      });
    },
    // 获取所有乡镇
    getRegion() {
      getRegion().then((res) => {
        if (res.status === 0) {
          this.RegionData = res.data;
        }
      });
    },
    addTown() {
      addTown(this.addTownForm).then((res) => {
        if (res.status === 0) {
          this.$message.success(res.message);
          this.init();
          this.addTownDialog = false;
        }
      }).catch(() => {
        this.$message.error('添加失败')
      })
    },
    change(form) {
      this.mapDialog = false;
      this.addTownForm.town_address = form.address;
      this.addTownForm.longitude = form.lng;
      this.addTownForm.latitude = form.lat;
    },
    townAddressChange(value) {
      this.addTownForm.town_address = value;
    },
    reset(item) {
      if (item === "add") {
        this.addTownDialog = false;
        this.addTownForm = {
          parentId: parseInt(this.$route.params.id),
          town_name: "",
          town_address: "",
          town_range: "",
          attendance_id: "",
          longitude: "",
          latitude: "",
        };
      }
      if (item === "update") {
        this.updateTownDialog = false;
        this.updateTownForm = {
          id: "",
          parentId: "",
          town_name: "",
          town_address: "",
          town_range: "",
          attendance_id: "",
          longitude: "",
          latitude: "",
        };
      }
    },
    updateTown(item) {
      this.updateTownForm = { ...item };
      this.updateTownDialog = true;
    },
    update() {
      updateTown(this.updateTownForm).then(res=>{
        if(res.status === 0){
          this.$message.success(res.message)
          this.updateTownDialog = false
          this.init()
        }
      }).catch(() => {
        this.$message.error('修改失败')
      })

    },
    delTown(item){
      delTown(item).then(res=>{
        if(res.status === 0){
          this.$message.success(res.message)
          this.init()
        }
      })
    }
  },
};
</script>
<style lang='less' scoped>
.header {
  text-align: left;
  margin-bottom: 10px;
}
::v-deep .el-dialog {
  margin: 0 auto 5vh !important;
}
</style>